<template>
	<view class="register">
		<view class="register-logo">
			<image src="../../static/logo.png" mode="widthFix"></image>
		</view>
		<view class="register-btn flow-center active" @click="savBtn">手机号快捷登录</view>
		<view class="agreement-txt"><text class="select-tag" :class="is_agress ? 'active' : ''" @click="is_agress = !is_agress">已阅读并同意</text><text class="blue" @click.stop="openDetail('agreement')">用户协议</text><text>和</text><text  class="blue"  @click.stop="openDetail('privacy')">隐私政策</text></view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import $validate from '@/common/validate.js';
	export default {
		computed: {
			...mapState(['configDetail','userInfo','storeCode']), // vuex获取用户数据
		},
		name:'login',
		data() {
			return {
				tips: '',
				seconds: 60,
				mobile: '',
				captcha: '',
				is_agress:false,
				limitclick:false,
			}
		},
		onLoad(options) {
			
		},
		onShow(){
			
		},
		onUnload() {
			
		},
		methods: {
			// 打开协议
			openDetail(type){
				this.type = type;
				this.show2 = true;
			},
			// 同意协议
			agreeBtn(type){
				this.is_agress = true;
				this.show2 = false;
			},
			// 不同意协议
			unagreeBtn(type){
				this.is_agress = false;
				this.show2 = false;
			},
			// 获取协议
			getDetils(type){
				let url = type == 'privacy' ? 'api/index/privacy' : 'api/index/agreement';
				this.$H.get(url, {}).then(res => {
					if(type == 'privacy'){
						let privacy = res.replace(/<img([\s\w"-=\/\.:;]+)/ig,'<img style="width: 100%;display:block" $1');
						this.privacy = privacy;
					}else{
						let agreement = res.replace(/<img([\s\w"-=\/\.:;]+)/ig,'<img style="width: 100%;display:block" $1');
						this.agreement = agreement;
					}
				});
			},
			open() {
			  // console.log('open');
			  this.show = true;
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			open2() {
			  // console.log('open');
			},
			close2() {
			  this.show2 = false
			  // console.log('close');
			},
			backBtn(){
				// 返回上一页
				uni.navigateBack({
					delta: 1
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			// 登录
			savBtn: function(res) {
				
				
				let tit = '';
				if (!this.captcha) tit = '请输入验证码';
				if ($validate.checkMobile(this.mobile)) tit = $validate.checkMobile(this.mobile);
				if (!this.mobile)  tit = '请输入手机号';
				if(tit){
					uni.showToast({
						title: tit,
						icon:'none'
					})
					return;
				}
				let parmes = {
					mobile: this.mobile,
					captcha: this.captcha,
				}
				if(this.limitClickFun()) return;
				this.$H.post('api/user/mobilelogin', parmes).then(res => {
					this.$store.commit('userToken', res.userinfo.token);
					this.getUserinfo();
				});
			},
			// 获取用户信息
			getUserinfo(){
				this.$H.post('api/user/getUserInfo', {}).then(res => {
					this.$store.commit('userInfo', res);
					setTimeout(()=>{
						uni.$emit('loginSuccess');//通知登录成功
					},300)
					setTimeout(()=>{
						let pages = getCurrentPages(); // 当前页面路由
						if(pages[pages.length - 2] && pages[pages.length - 2].route){
							// 返回上一页
							uni.navigateBack({
								delta: 1
							});
						}else{
							
						}
					},800)
					uni.showToast({
						title: '登录成功',
					})
				});
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					if (!this.mobile) {
						uni.showToast({
							title:'请输入电话',
							icon:'none'
						})
						return;
					}
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					this.$H.post('api/sms/send', {mobile:this.mobile,event:'mobilelogin'}).then(res => {
						uni.showToast({
							title:'验证码已发送',
							icon:'none'
						})
					},rej =>{});
				} else {
					uni.showToast({
						title:'倒计时结束后再发送',
						icon:'none'
					})
				}
			},
			end() {
				
			},
			start() {
				
			},
			/**
			 * 限制频繁点击
			 */
			limitClickFun(){
				if (this.limitclick) {
					return true;
				}
				this.limitclick = true;
				setTimeout(()=> {
					this.limitclick = false;
				}, 5000)
				return false;
			}
		}
		
	}
</script>
<style lang="scss">
	.code-btn{
		button{
			background-color: #fff  !important;
			border: none !important;
			font-size: 32rpx  !important;
			font-family: PingFang SC-Regular, PingFang SC;
			color: #0E54A4  !important;
		}
	}
</style>
<style lang="scss" scoped>
	.register{
		padding: 300rpx 80rpx 20rpx;
		.register-logo{
			margin: 0 auto;
			width: 151rpx;
			image{
				display: block;
				width: 100%;
				height: 151rpx;
			}
		}
		.register-btn{
			width: 100%;
			height: 98rpx;
			background-color: #BBBBBB;
			border-radius: 98rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			margin: 350rpx auto 20rpx;
			&.active{
				background-color: #0E54A4;
			}
		}
	}
	.agreement-txt{
		font-size: 28rpx;
		color: #666666;
		text{
			display: inline-block;
			line-height: 60rpx;
		}
		.blue{
			color: #0E54A4;
		}
		.select-tag{
			padding-left: 60rpx;
			background: url("@/static/icon/select.png") no-repeat left center;
			background-size: 40rpx 40rpx;
		}
		.active{
			background: url("@/static/icon/select-active.png") no-repeat left center;
			background-size: 40rpx 40rpx;
		}
	}
</style>
